<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <myhead th:replace="basic/layout :: head('后台管理页面')"></myhead>
  <meta charset="UTF-8">
  <title>Table</title>
  <link th:href="@{/login/css/bootstrap.min.css}" rel="stylesheet">
  <style>
      .table .productImg{
          width: 50px;
          height: 50px;
      }
      #liveAlertPlaceholder{
        display: none;
        
      }
  </style>
  <script th:src="@{/login/js/bootstrap.bundle.min.js}" ></script>
  <script th:src="@{/login/js/jquery-3.6.0.js}" ></script>
  
</head>
<body class="container mt-4">
<div th:replace="basic/layout :: topNav('back')"></div>


<a href="/toProductForm" class="btn btn-success mb-3">新增商品</a>
<form class="row g-3" method="get" action="/searchProduct">
  
  <input type="hidden" th:name="${_csrf.parameterName}"     th:value="${_csrf.token}"/>
  <div class="col-12">
    <label for="name" class="form-label">商品名称</label>
    <input type="text" class="form-control" name="name" id="name" placeholder="请输入要查询的商品名称">
  </div>
  
  <div class="col-md-3">
    <label for="minAmount" class="form-label">金额最小值</label>
    <input type="number" class="form-control" name="minAmount" id="minAmount">
  </div>
  <div class="col-md-3">
    <label for="maxAmount" class="form-label">金额最大值</label>
    <input type="number" class="form-control" name="maxAmount" id="maxAmount">
  </div>
  
  <div class="col-md-4">
    <label for="type" class="form-label">商品类型</label>
    <select id="type" class="form-select" name="type">
      <option></option>
      <option>电脑配件</option>
      <option>服装</option>
      <option>电子产品</option>
      <option>家居用品</option>
      <option>书籍</option>
    </select>
  </div>
  
  <div class="col-12">
    <button type="submit" class="btn btn-primary">查询</button>
  </div>
</form>
<div id="liveAlertPlaceholder" class="alert alert-success">删除成功</div>
<div class="container-fluid">
  <div class="row">
  <div th:replace="basic/layout :: menu"></div>
    <div class="col-10">
      <table class="table">
        <thead class="table-light">
        <tr>
          <th>图片</th>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>商品数量</th>
          <th>分类</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        
        <tr th:each="product:${productList}">
          <td>
            <img class="productImg" th:src="${product.imageUrl}">
          </td>
          <td th:text="${product.name}"></td>
          <td th:text="${product.price}"></td>
          <td th:text="${product.stock}"></td>
          <td>
            <span class="badge text-bg-secondary" th:text="${product.category}"></span>
          </td>
          <td>
            <span th:if="${product.status} == 1" class="badge text-bg-success">正常</span>
            <span th:if="${product.status} == 0" class="badge text-bg-danger">下架</span>
          </td>
          <td>
            <a th:href="'/toProductForm?id=' + ${product.id}" class="btn btn-primary btn-sm">修改</a>
            <button type="button" class="btn btn-danger btn-sm" th:onclick="showModal([[${product.id}]])">删除</button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="modal" tabindex="-1" id="deleteModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">警告</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>请确认是否删除</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-danger" th:onclick="deleteProduct()">删除</button>
      </div>
    </div>
  </div>
</div>
</body>
<script>
  var deleteId;
  var myModal = new bootstrap.Modal(document.getElementById('deleteModal'),{
    keyboard:false
  });
  function deleteProduct(){
    // 请求方式一：浏览器跳转
    // window.location.href = "/deleteProduct?id="+deleteId;
    //请求方式二：AJAX发起请求
    $.ajax({
      type: 'DELETE',
      url: '/deleteProduct',
      data: { id: deleteId} ,//url请求参数:可选
      success: function (resp) {
        if(resp == "OK"){}
        var messageDom = document.getElementById("liveAlertPlaceholder");
        messageDom.style.display = "block"
        myModal.hide()
        window.setTimeout(function (){
          messageDom.style.display = "none"
          window.location.href = "/getProductTable"
        },2000)
      },
      error: function () {
      
      }
    });
    
  }
  
  function showModal(productId){
    myModal.show()
    deleteId = productId
   
}
</script>
</html>